<template>
  <div class="query-container flex justify-between align-start">
    <div
      class="flex-sub queryBox"
      ref="queryBox"
      :class="{'expand':isExpand,'show-expand':showExpand}"
    >
      <div ref="query" class="query">
        <slot></slot>
      </div>
    </div>
    <div class="flex align-center">
      <el-button type="info" @click="handleSearch">查询</el-button>
      <el-button class="reset" @click="handleReset">重置</el-button>
      <el-button
        @click="handleExpand"
        type="text"
        class="expand-btn align-center link-text fz-14"
        :class="{'expand':isExpand}"
        v-if="showExpand"
      >
        <div
          @mousedown="handleMouseStatus(true)"
          @mouseup="handleMouseStatus(false)"
          :class="{'link-text-press':expandBtnOnPress}"
        >
          {{ isExpand ? '收起' : '展开' }}
          <svg-icon class="h-8 arrow-img" icon-class="arrow"></svg-icon>
        </div>
      </el-button>
    </div>
  </div>
</template>

<script>
/**
 *
 *  条件搜索栏组件, 用于控制搜索栏内容溢出时的展开/收起
 *  当内容不足以需要展开时, 自动隐藏展开按钮
 *
 *  @example <query-container><el-form><el-from-item>...</el-form-item></el-form></query-container>
 *
 *  @emits search 点击查询按钮时触发事件
 *  @emits reset 点击重置时触发事件
 *  @emits expand 点击展开时触发事件,并返回当前`showExpand`的值
 */
export default {
  name: 'QueryContainer',
  data() {
    return {
      isExpand: false,
      expandBtnOnPress: false,
      showExpand: false,
    }
  },
  created() {
    this.$nextTick(() => {
      console.log(this.$refs.query.offsetHeight, this.$refs.queryBox.offsetHeight)
      this.showExpand = this.$refs.query.offsetHeight > this.$refs.queryBox.offsetHeight
    })
  },
  methods: {
    handleMouseStatus(status) {
      this.expandBtnOnPress = status
    },
    handleSearch() {
      this.$emit('search')
    },
    handleReset() {
      this.$emit('reset')
    },
    handleExpand() {
      this.isExpand = !this.isExpand
      this.$emit('expand', this.isExpand)
    },
  },
}
</script>

<style scoped lang="scss">
.query-container {
  padding: vw(20px);
  background-color: white;

  ::v-deep .reset.el-button {
    font-size: vw(14px);
    background: #f2f2f2;
  }

  .expand-btn {
    padding-right: 10px;
    padding-left: 10px;

    .arrow-img {
      transform: rotate3d(0, 0, 1, 180deg);
      transition: transform ease-out 0.4s;

      path {
        fill: red;
      }
    }
  }

  .expand-btn.expand {
    .arrow-img {
      transform: rotate3d(0, 0, 1, 0deg);
    }
  }

  .queryBox {
    max-height: vw(46px);
    margin-bottom: vh(-20px);
    overflow: hidden;
    transition: max-height linear 0.35s;

    &.show-expand {
      ::v-deep.el-form-item {
        margin-bottom: 10px;
      }
    }

    ::v-deep {
      .el-form-item {
        margin-bottom: 0;
      }

      .el-form-item__label,
      .el-form-item__content {
        line-height: vw(36px);
        font-size: vw(14px);
        color: #333333;
      }
    }
  }

  .queryBox.expand {
    max-height: 20vh;
  }

  //.expand {
  //  ::v-deep {
  //    .el-form-item {
  //      margin-bottom: vh(20px);
  //    }
  //  }
  //}
}
</style>
